<script setup lang="ts">
import {computed} from "vue";

const props = defineProps({
  // 进度条的百分比(单位%)
  percent: {
    required: true,
    type: Number,
    validator(value: number) {
      return value >= 0 && value <= 100
    }
  },
  height: {
    type: String,
    default: () => '1em',
    // 匹配以数字开头，以em何px结尾的字符串
    validator: (value: string) => /^\d+(\.\d+)?(em|px)$/.test(value)
  },
  // 进度条的颜色样式
  type: {
    type: String,
    default: () => 'primary',
    validator: (value: string) => ['primary', 'deep'].includes(value)
  }
})

const computedPercent = computed(() => Math.floor(props.percent) + '%')
const computedType = computed(() => {
  switch (props.type) {
    case 'deep':
      return {
        backColor: 'rgb(0 0 0 / 40%)',
        color: '#fdf48b',
      }
    default:
      return {
        backColor: 'rgba(119, 115, 115, 0.2)',
        color: '#fdf48b',
      }
  }
})
</script>
<template>
  <div class="transparent-base">
    <div class="colored-up">
      <div class="inside-number">
        <slot/>
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
.transparent-base {
  width: 100%;
  background-color: v-bind('computedType.backColor');
  height: v-bind(height);

  .colored-up {
    position: absolute;
    height: inherit;
    background-color: v-bind('computedType.color');
    width: v-bind(computedPercent);

    .inside-number {
      display: flex;
      justify-content: center;
      color: #5f2100;
    }
  }
}
</style>